<template>
    <div class="page-body">
        <div class="head">
            <div class="avatar">
                <img src="/static/img/uc_avatar.png" alt="">
            </div>
            <div class="info">
                <div>18736373635</div>
                <div class="article">会员编号：88787878</div>
            </div>
        </div>

        <div class="banner">
            <div>
                <div>
                    <a href="/orderRecord" class="right">
                        <img src="/static/img/uc_icon4.png" alt=""> <span>优点</span></a>
                    <img src="/static/img/uc_icon5.png" alt="" @click="showDialog2=true">
                </div>
                <div>1800</div>
            </div>
            <div>
                <a href="/myOrder">去兑换&nbsp;查订单 <i class="icon-cross"></i> </a>
            </div>
        </div>

        <swiper :options="swiperOption" ref="mySwiper" id="ucSwiperBox">
            <!-- slides -->
            <swiper-slide >
                <div class="box" :style="backgroundDiv">
                </div>
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>

        <group class="links">
            <cell title="联系我们" is-link>
                <img slot="icon" src="/static/img/uc_icon1.png">
            </cell>
            <cell title="常见问题" is-link>
                <img slot="icon" src="/static/img/uc_icon2.png">
            </cell>
            <cell title="退出登录" is-link  @click.native="logOut">
                <img slot="icon"  src="/static/img/uc_icon3.png">
            </cell>
        </group>


        <div v-transfer-dom>
        <x-dialog  v-model="showDialog" hide-on-blur dialog-transition="false">
                <div class="jy-alert-box">
                    <div class="jy-alert-icon">
                    </div>
                    <div class="jy-alert-content">
                        登录成功 <br><br>
                        <p>共计优点 <span>2000</span> 点</p>
                    </div>
                    <a class="btn-black" href="/mall" >去兑换</a>
                </div>
        </x-dialog>
        <x-dialog  v-model="showDialog2" hide-on-blur>
            <div class="jy-alert-box1">
                <div class="jy-alert-icon"></div>
                <div class="jy-alert-bg"></div>
                <h2>什么是优点？</h2>
                <div class="jy-alert-content">
                    区块链概念股，因业务与区块链有某种联系，被市场归为区块链概念股 ，“概念股”也有门槛，从比特币、代币、ICO到区块链投资者还来不及弄懂概念的真实含义，热潮已经起来，不少投资者冒险快速加入“赌局”。区块链不等于比特币、不等于代币或Token，也不等于ICO。仅基于区块链颠覆经济范式的想象。
                </div>
                <a class="btn-black" href="/mall">去兑换</a>
            </div>
        </x-dialog>

        <confirm v-model="showLogOutBox"
                 hide-on-blur
                 :title="'是否需要退出'"
                 @on-cancel="onCancel"
                 @on-confirm="onConfirm"
                 @on-show="onShow"
                 @on-hide="onHide">
            <p style="text-align:center;">{{ 'Are you sure?' }}</p>
        </confirm>

        </div>

    </div>
</template>

<script>
import { Group, Cell,XDialog,Confirm,TransferDomDirective as TransferDom } from 'vux';

require('../../assets/css/swiper.css');


const baseList = [
    {
        url: 'javascript:',
        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg'
        // title: '送你一朵fua'
    },
    {
        url: 'javascript:',
        img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg'
        // title: '送你一辆车'
    },
    {
        url: 'javascript:',
        img: 'https://static.vux.li/demo/5.jpg', // 404
        // title: '送你一次旅行',
        fallbackImg: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
    }
];

export default {
    components: {
        Group,
        Cell,
        XDialog,
        Confirm
    },
    directives: {
        TransferDom
    },
    data() {
        return {
            demo01_list: baseList,
            demo01_index: 0,
            backgroundDiv: {
                backgroundImage: 'url(' + require('../../assets/images/p1.jpg') + ')',
            },
            showLogOutBox:false,
            showDialog:true,
            showDialog2:false,
            swiperOption: {
                slidesPerView:1,
                observeParents: true,
                observer: true,
                centeredSlides: true,
                notNextTick: true,
                autoplay:{
                    delay: 3000,
                    stopOnLastSlide: true,
                    disableOnInteraction: true
                },
                loop: true,
                loopFillGroupWithBlank: true,
                autoHeight: false,
                pagination: {
                    el: '.swiper-pagination',
                    paginationClickable: true,
                    bulletClass:'swiper-pagination-bullet my-bullet'
                },
                allowTouchMove: true,
                on: {
                    resize: function(){
                        w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
                        this.params.slidesOffsetBefore = 0.09*w;
                        this.params.slidesOffsetAfter = 0.09*w;
                        this.params.width =0.82*w;
                        this.update();
                    }
                }
            }
        };
    },
    methods: {
        /*onSwiperItemIndexChange(index) {
            console.log('item change', index);
        }*/
        onCancel(){ //取消
            this.showLogOutBox = false;
        },
        onConfirm (msg) {
            this.$store.dispatch('logout').then(() => {
                this.$router.replace('/login')
            })
        },
        onHide () {
            console.log('on hide')
        },
        onShow () {
            console.log('on show')
        },
        logOut(){
            this.showLogOutBox = true;
        }
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.swiper
        }
    },
    mounted() {
        let that = this;
        document.title = '个人中心';
        setTimeout(function () {
            that.swiper.autoplay.start();
        },3000);
    }
};
</script>

<style lang="less" scoped>
.head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 2.34rem;
    padding: 0 0.2rem 0.72rem 0.2rem;
    background-image: url(/static/img/uc_bg_01.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    .avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 1.3rem;
        padding-bottom: 0.2rem;
        img {
            width: 0.94rem;
            border-radius: 50%;
        }
    }
    .info {
        flex: 1;
        padding-top: 0.2rem;
        font-size: 0.32rem;
        font-weight: 800;
        color: #bda57d;
    }
    .info .article{
        font-size:.28rem;
        margin-top: .15rem;
    }
}
.banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 2.2rem;
    margin-top: -0.72rem;
    padding: 0 0.15rem;
    font-size: 0.36rem;
    color: #fff;
    &:after {
        position: absolute;
        z-index: 0;
        content: '';
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1.48rem;
        background-color: #fff;
    }
    & > div {
        z-index: 1;
        width: 50%;
        height: 2.15rem;
        // background-image: url(/static/img/uc_bg_02.png);
        // background-position: center center;
        // background-repeat: no-repeat;
        background-size: 100% 100%;
        &:first-child {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-image: url(/static/img/uc_bg_02.png);
            div:first-child {
                width: 80%;
                text-align: center;
                img {
                    width: 0.32rem;
                    vertical-align: -.08rem;
                }
                .right{
                    margin-right: 0.2rem;
                    vertical-align: top;
                    img {
                        width: 0.36rem;
                        height: .36rem;
                        vertical-align: middle;
                    }
                    span{
                        line-height: 0.36rem;
                        vertical-align: middle;
                    }
                }
            }
        }
        &:last-child {
            display: flex;
            align-items: center;
            justify-content: center;
            background-image: url(/static/img/uc_bg_03.png);
            a:not(:first-child) {
                margin-left: 0.2rem;
            }
        }
    }
    a{
        color:#fff;
    }
}
.swiper {
    height: 2rem;
    margin-top: 0.25rem;
    background-color: #fff;
    & /deep/ .vux-indicator > a > .vux-icon-dot.active,
    & /deep/ .vux-indicator-right > a > .vux-icon-dot.active {
        background-color: #333;
    }
}
.links {
    // display: block;
    margin-top: 0.25rem;
    // background-color: #fff;
    & /deep/ .weui-cells {
        &:first-child:before {
            border-top: none;
        }
        &:last-child:after {
            border-bottom: none;
        }
    }
    .weui-cell {
        img {
            display: block;
            margin-right: 0.1rem;
            width: .4rem;
        }
        &:before {
            border-top-color: #eee;
        }
    }
    .vuex-lable{
        vertical-align: .01rem;
    }
}

.mall-banner-swiper,#ucSwiperBox{
    width: 100%;
    height: 2rem;
    position: relative;
    margin-top:.3rem;
}
.swiper-container{
    overflow: inherit;
}
.swiper-slide,.swiper-slide .box{
    width: 100%;
    height: 100%;
    color:#fff;
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.jy-alert-wrapper{
    position:fixed;
    left:10%;
    right: 10%;
    height: 6rem;
    background:#fff;
    border-radius:10px;
    top:50%;
    margin-top:-3rem;
    z-index: 502;
}


.jy-alert-box{
    padding: .4rem .7rem .7rem;
}
.jy-alert-box .jy-alert-icon{
    width: 2.22rem;
    height: 1.92rem;
    margin: 0 auto .5rem;
    background-image: url(../../static/img/ok3.jpg);
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.jy-alert-box .jy-alert-content{
    font-size: .28rem;
    line-height: 1.4;
    text-align: center;
    font-weight: 600;
    margin-bottom: -.1rem;
}
.jy-alert-box .jy-alert-content p{
    font-size: .32rem;
    color:#e0a64a;
    text-align: center;
}

.jy-alert-box1{
    padding:0 0.4rem .7rem;
}
.jy-alert-box1 h2{
    margin: .3rem 0 .4rem;
    text-align: center;
    font-size: .32rem;
    color:#333
}
.jy-alert-box1 .jy-alert-icon{
    width: 2rem;
    height: 1.45rem;
    margin: 0 auto .5rem;
    background-image: url(../../static/img/round_logo.png);
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: absolute;
    top:-0.7rem;
    left:50%;
    margin-left:-1rem;
}
.jy-alert-box1 .jy-alert-bg{
    height: 1.25rem;
    background-image: url(../../static/img/intro_bg2.jpg);
    background-size: 100% 100%;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    margin-left: -.4rem;
    margin-right: -.4rem;
    margin-bottom: .4rem;
}
.jy-alert-box1 .jy-alert-content{
    font-size: .28rem;
    line-height: 1.6;
    text-align: left;
    color:#666
}

.btn-black{
    display: block;
    width:80%;
    margin:.75rem auto 0;
    height: .9rem;
    line-height: .9rem;
    color: #fff;
    font-size: .28rem;
    text-align: center;
    background:#0b0b0b;
    background:-moz-linear-gradient(top,#0b0b0b,#333131);
    background:-webkit-linear-gradient(top,#0b0b0b,#333131);
}
.icon-cross{
    display: inline-block;
    width: .2rem;
    height: .22rem;
    background-image: url(../../static/img/arrow-right-small.png);
    background-size:contain;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
</style>
